<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <style>
        #main {
            width: 600px;
            height: 400px;
        }
    </style>
</head>

<body>
    <div id="main">11</div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            title: {
                text: "康师傅牛肉面销量"
            },
            xAxis: {
                type: 'category',

                data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],

                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                },
                boundaryGap: ['30%', '20%']
            },
            yAxis: {
                axisLine: {
                    show: true
                },
                axisTick: {
                    show: true
                },
                type: "value"
            },
            series: [{
                name: '销量',
                data: [3000, 2800, 900, 1000, 800, 700, 1400, 1300, 900, 1000, 800, 600],
                type: 'line',
                color: 'green',
                areaStyle: {
                    color: 'pink'
                },
                smooth: true,
                markPoint: {
                    data: [
                        { 'type': 'max', 'name': '最大值' },
                        { 'type': 'min', 'name': '最小值' },
                    ],
                    itemStyle:{
                        color:'red'
                    }
                },
                markLine: {
                    data: [
                        { 'type': 'average', 'name': '平均值' }
                    ],
                    lineStyle: {
                        color: 'red'
                    }
                },
                markArea: {
                    data: [
                        // 标记第一个区域，从第一个点到第三个点
                        [{ xAxis: '1月', yAxis: 3000 }, { xAxis: '2月', yAxis:0 }],
                        // 标记第二个区域，从第四个点到第六个点
                        [{ xAxis: '7月', yAxis: 3000 }, { xAxis: '8月', yAxis: 0 }]
                    ],
                    itemStyle:{
                        color:'pink'
                    }
                }
            }]
        }
        myChart.setOption(option);
    </script>
</body>

</html>